<!DOCTYPE html>
<html lang="en">
  <head>

<!-- ELEMENTOS DEL BOOTSTRAP -->

    <meta charset="utf-8">
    <title>Despacho</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le styles -->
    <link href="../src/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      /* Override some defaults */
      html, body {
        background-color: #eee;
      }
      body {
        padding-top: 40px; /* 40px to make the container go all the way to the bottom of the topbar */
      }
      .container > footer p {
        text-align: center; /* center align it with the container */
      }
      .container {
        width: 820px; /* downsize our container to make the content feel a bit tighter and more cohesive. NOTE: this removes two full columns from the grid, meaning you only go to 14 columns and not 16. */
      }

      /* The white background content wrapper */
      .content {
        background-color: #fff;
        padding: 20px;
        margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */
        -webkit-border-radius: 0 0 6px 6px;
           -moz-border-radius: 0 0 6px 6px;
                border-radius: 0 0 6px 6px;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
           -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
                box-shadow: 0 1px 2px rgba(0,0,0,.15);
      }

      /* Page header tweaks */
      .page-header {
        background-color: #f5f5f5;
        padding: 20px 20px 10px;
        margin: -20px -20px 20px;
      }

      /* Styles you shouldn't keep as they are for displaying this base example only */
      .content .span10,
      .content .span4 {
        min-height: 500px;
      }
      /* Give a quick and non-cross-browser friendly divider */
      .content .span4 {
        margin-left: 0;
        padding-left: 19px;
        border-left: 1px solid #eee;
      }

      .topbar .btn {
        border: 0;
      }

    </style>

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">

<!-- FIN ELEMENTOS DEL BOOTSTRAP -->

<!-- ELEMENTOS DEL RASTREO -->

<!-- js efecto muestra mapa -->

<link href="../src/facebox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="../lib/jquery.js" type="text/javascript"></script>
<script src="../src/facebox.js" type="text/javascript"></script>
 
<!-- javaScript recepcion de codigos LATITUD Y LONGITUD  -->

<script type="text/javascript">


    jQuery(document).ready(function($) {
      $('a[rel*=facebox]').facebox({
        loadingImage : '../src/loading.gif',
        closeImage   : '../src/closelabel.png'
      })
    })


    function pasovariables(latitud, longitud){
      $(document).bind('reveal.facebox', function() {
        if (GBrowserIsCompatible()) {
            //var latitud = 28.364819;
            //var longitud = -14.153137;
            var map = new GMap2(document.getElementById("map_canvas"));
            map.setCenter(new GLatLng(latitud, longitud), 16);
            map.addControl(new GLargeMapControl());
            map.addControl(new GMapTypeControl());
            map.enableScrollWheelZoom();
            //a�ado marcas
            var icon = new GIcon();
             icon.image = "image/cisterna.gif";
               icon.iconSize = new GSize(46, 24);
               icon.iconAnchor = new GPoint(46, 24);
            //sombra
            icon.shadow = "image/cisterna-shadow.png";
             var tamanoSombra = new GSize(59,24);
            icon.shadowSize = tamanoSombra; 
              var latlng = new GLatLng(latitud,longitud);
            map.addOverlay(new GMarker(latlng, icon));
            

          }
      })
      }
</script>  


<!-- FIN ELEMENTOS DEL RASTREO -->

<!-- ELEMENTOS DEL JQUERY REST -->

<script type="text/javascript">

function verMapa(){
	pasovariables($("#longitud").html(),$("#latitud").html());
}

$(document).ready(function() {
	var ht= window.location.hostname;	
	$("#myButton").click(function() {
		$.ajax({
			url: 'http://'+ ht +':8080/jaxws-tracking/services/restDespacho/despacho/getDespachos',
			type: 'GET',
			success: function(data) {


			      var output = "";
					output+='<tr>'+
					'<td><h5>Fecha Registro </h5></td>'+
					'<td><h5>Fecha Entrega  </h5></td>'+ 
					'<td><h5>Cantidad	    </h5></td>'+
					'<td><h5>Placa		    </h5></td>'+ 
					'<td><h5>Estado         </h5></td>'+
				'</tr>';
			      
			      $.each(data, function(i,row){
			    	var fechareg = row['fechaRegistro'];
			    	var fechaped = row['fechaEntrega'];
			    	var cantidad = row['cantidad'];
			        var placa 	 = row['placa'];
			        var estado	 = row['atendido'];
			        if (estado == '0'){ estado = 'Pendiente'};
			        if (estado == '1'){ estado = 'Despachado'};	

			        output+='<tr>'+
			        			'<td><span>'+fechareg+'</span></td>'+
			        			'<td><span>'+fechaped+'</span></td>'+			        			
			        			'<td><span>'+cantidad+'</span></td>'+			        		
			        			'<td><span>'+placa+'</span></td>'+
			        			'<td><span>'+estado+'</span></td>'+
			        		'</tr>';	
			      });
			      $("#tablita").html("").append(output);      
			},
			error: function(data) {
				alert("No se encontro informacion");
			}
		});
	});
 });
 

 
</script>

<!-- FIN ELEMENTOS DEL JQUERY REST -->

  </head>

  <body>

    <div class="topbar">
      <div class="fill">
        <div class="container">
          <a class="brand" href="/jaxws-tracking/">Tracking</a>
          <ul class="nav">
            <li class="active"><a href="/jaxws-tracking/">Inicio</a></li>
            <li><a href="#about">Acerca</a></li>
            <li><a href="#contact">Contacto</a></li>
          </ul>
          <form action="" class="pull-right">
            <input class="input-small" type="text" placeholder="Username">
            <input class="input-small" type="password" placeholder="Password">
            <button class="btn" type="submit">Ingresar</button>
          </form>
        </div>
      </div>
    </div>

    <div class="container">

      <div class="content">
        <div class="page-header">
          <h1>Listado de Despachos <small> Listado de Despachos</small></h1>
        </div>
        <div class="row">
          <div class="span10">
            <h2>Presione boton para obtener listado</h2>
				<button id="myButton" class="btn primary">Reporte</button> 		
				<p>
				<table id="tablita" class="zebra-striped">
				</table>
          </div>
          
          <div id="tablehtml"> </div>
<!--           
		<div class="span4">
			<h3>Reportes</h3>
				<div style="display:none;" id="mapagoogle">
					<div style="width: 800px; height: 400px" id="map_canvas">
					</div>
				</div>
		</div>
 -->		
        </div>
      </div>

      <footer>
        <p>&copy; Grupo Android 2011 - 2</p>
      </footer>

    </div> <!-- /container -->

  </body>
</html>
